<template>
    <div>
        
            <div class="key-box">
                <div class="st-num border-right">学号</div>
                <div class="st-name border-right">姓名</div>
                <div class="st-gender border-right">性别</div>
                <div class="st-phone">联系方式</div>
            </div>
            <div>
                <ul class="st-list" v-for="(item, index) in stulist" :key="index">
                    <li class="st-num">{{item.num}}</li>
                    <li class="st-name">{{item.name}}</li>
                    <li class="st-gender">{{item.gender=='male'?'男':'女'}}</li>
                    <li class="st-phone ">{{item.sphone}}</li>  
                </ul>
            </div>
       
    </div>
</template>

<script>
import axios from 'axios'
import {mapState} from 'vuex'
export default {
  name: 'studentkey',
  data() {
      return {
          stulist:[],
      }
  },
  computed:{
      ...mapState(['addr']),
      gender(){
          
      }
  },
  methods:{
      getapi(){
          axios({
              method:'post',
              url:'/api/class/getStu',
              headers: {'content-type': 'application/x-www-form-urlencoded'},
              data:this.addr
               
          }).then(this.getapisucc)
      },
      getapisucc(res){
          if(res.data.ret){
             this.stulist = res.data.data
          }
         
      }
},
  created() {
    this.getapi()
},
}
</script>

<style scoped>

    .key-box{
        height: .8rem;
        line-height: .8rem;
        background:rgb(196, 196, 196);
        text-align: center;
        font-size: .32rem;
        color: rgb(89, 92, 255)
    }
    .st-num{
        float: left;
        width: 30%;
    }
    .st-name{
        float: left;
        width: 26.5%;
    }
    .st-gender{
        float: left;
        width: 11%;
        
    }
    .st-phone{
        float: left;
        width: 32.5%; 
    }
    .st-list{
        height: .8rem;
        line-height: .8rem;
        background:rgba(255, 223, 163, 0.267);
        text-align: center;
        font-size: .32rem;
        color: black;
        border-bottom: .01rem solid rgba(107, 107, 107, 0.5);
    }
   
</style>